Script Dasar HTML

Selamat Datang di Dunia TJKT!

Script Dasar HTML (Kerangka Wajib)

Kode ini adalah template minimal yang Anda butuhkan untuk membuat halaman web yang valid.

HTML


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Saya</title>
</head>
<body>

    <!-- Area ini adalah tempat semua konten yang terlihat oleh pengguna -->
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>

</body>
</html>

Penjelasan Setiap Bagian Script

Setiap baris kode dasar di atas memiliki peran spesifik. Anggap saja ini seperti surat resmi yang harus memiliki kepala surat, alamat, dan isi.

  1. Deklarasi Dokumen 
    <!DOCTYPE html>

    Peran: Memberi tahu browser (seperti Chrome atau Firefox) bahwa dokumen ini adalah dokumen HTML versi terbaru (HTML5).

    Analogi: Ini seperti label di sampul buku yang menyatakan, "Ini adalah buku yang ditulis dalam format HTML."

  2. Elemen Akar (Root Element) 
    <html lang="id">

    Peran: Ini adalah kontainer terbesar yang membungkus semua konten HTML lainnya. Atribut lang="id" memberi tahu browser dan mesin pencari bahwa bahasa utama konten di halaman ini adalah Indonesia.

  3. Kepala Dokumen (The Head) 
    <head>

    Peran: Berisi informasi penting tentang dokumen yang TIDAK akan ditampilkan langsung di halaman web (kecuali title). Ini seperti "data teknis" halaman.

    <meta charset="UTF-8">

    Peran: Menentukan encoding karakter. UTF-8 adalah standar modern yang mendukung hampir semua karakter di dunia (termasuk huruf unik dan emoji).

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Peran: Sangat penting untuk mobile. Instruksi ini memastikan halaman akan menyesuaikan tampilannya dengan lebar layar perangkat (HP, tablet) agar tidak terlihat terlalu besar atau terlalu kecil (responsive).

    <title>Judul Halaman Saya</title>

    Peran: Teks yang muncul di tab browser atau di hasil pencarian Google.

  4. Tubuh Dokumen (The Body) 
    <body>

    Peran: Ini adalah area utama di mana semua konten yang dilihat oleh pengguna berada: teks, gambar, tombol, video, dll.

    <h1>Halo Dunia!</h1>

    Peran: Ini adalah tag untuk judul utama halaman (Header Level 1). Hanya boleh ada satu <h1> per halaman.

    <p>Ini adalah paragraf pertama saya.</p>

    Peran: Tag standar untuk membuat paragraf teks biasa.

Script Lain yang Sering Digunakan

Setelah kerangka dasar, tag ini adalah yang paling sering Anda masukkan ke dalam bagian <body>:

Tag Nama Fungsi
<a> Anchor Membuat tautan (link) ke halaman lain. (Contoh: <a href="halaman-lain.html">Klik Di Sini</a>)
<img> Image Menampilkan gambar. (Contoh: <img src="foto.jpg" alt="Deskripsi Foto">)
<div> Division Kontainer paling umum untuk mengelompokkan elemen dan menatanya dengan CSS.
<header>, <nav>, <footer> Semantic Tags Membantu mesin pencari memahami struktur halaman (misalnya, header untuk bagian atas, nav untuk menu navigasi).